<template>
  <view class="content">
    
    <!-- 时间 -->
    <view class="massage">
      <view class="data text-blue">{{date}}</view>
    </view>
    <!-- 睡眠 -->
    <view class="sleep" @tap="jumpTosleep">
      <view class="sleep-warp">
        <text class="text-blue">{{energy}}</text>
        <view class="iconfont icon-yueliang text-blue">
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import popupMessage from 'components/popup-massage.vue'
  export default {
    components: {
      popupMessage
    },
    data() {
      return {
        promptMessage: "暂停片刻，休息一会",
        energy: "开始睡眠",
        date: ""
      }
    },
    methods: {
      //格式化日期
      getCurrentTime() {
        //获取当前时间
        let date = new Date();
        let hours = date.getHours(); //小时
        let minute = date.getMinutes(); //分
        minute = minute < 10 ? "0" + minute : minute;
        let time = hours + ":" + minute;
        this.date = time;
      },
      //跳转到sleep界面
      jumpTosleep() {
        uni.navigateTo({
          url: "/pages/monitor/sleep",
        });
      },
    },
    mounted() {
      this.getCurrentTime();
      clearInterval(myTimeDisplay);
      let myTimeDisplay = setInterval(() => {
        this.getCurrentTime(); //每秒更新一次时间
      }, 1000);
    }
  }
</script>

<style lang="scss">
  .content {
    height: 100%;
    background-color: #f3f3f3;

    .info {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding: 20rpx 20rpx;
    }

    .massage {
      padding-top: 100rpx;

      .data {
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 100rpx;
      }

      .prompt {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
    }

    .sleep {
      width: 250rpx;
      height: 250rpx;
      border-radius: 50%;
      text-align: center;
      margin: 300rpx auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      box-shadow: 2rpx 2rpx 90rpx #e1e5eb;

      .sleep-warp {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        padding-top: 40rpx;
        box-shadow: 2rpx 2rpx 90rpx #e3e9f1;
        z-index: 1;
      }

      .icon-yueliang {
        margin-top: 20rpx;
        font-size: 40rpx;
      }
    }


  }
</style>
